@import "./reset";
@import "./common";
// 头部
header {
    .top {
        .Back {
            width: vw(125);
            height: vw(60);
            border: vw(4) solid rgb(255, 147, 68);
            border-radius: vw(20);
            text-align: center;
            h1 {
                font-size: vw(24);
                font-weight: normal;
                line-height: vw(52);
            }
        }
        .detail {
            font-size: vw(26);
            h2 {
                font-weight: normal;
            }
        }
        .star {
            line-height: vw(126);
            img {
                width: vw(55);
                height: vw(55);
                vertical-align: middle;
            }
        }
    }
    // 大图片商品详情
    .banner {
        width: vw(750);
        .img-bg {
            width: vw(710);
            height: vw(260);
            margin: 0 auto;
            background: url(../image/detail/图层-52.png) no-repeat;
            background-size: cover;
            background-position: center;
        }
        .price {
            width: vw(665);
            margin: vw(38) auto 0;
            @include display-fx;
            align-items: center;
            div:first-of-type {
                span {
                    font-size: vw(60);
                    color: rgb(255, 147, 68);
                }
            }
            div:last-of-type {
                button {
                    font-size: vw(30);
                    color: #fff;
                    width: vw(112);
                    height: vw(60);
                    background-color: rgb(255, 147, 68);
                    border-radius: vw(20);
                }
                button:hover {
                    background-color: red;
                }
            }
        }
        .evaluate {
            width: vw(665);
            margin: vw(38) auto 0;
            @include display-fx;
            font-size: vw(30);
            div:first-of-type {
                display: flex;
                align-items: center;
                img {
                    width: vw(38);
                    height: vw(38);
                }
                span:first-of-type {
                    margin-left: vw(12);
                }
                span:last-of-type {
                    color: rgb(255, 147, 68);
                }
            }
            div:last-of-type {
                color: rgb(149, 149, 149);
            }
        }
    }
}
// 商店列表
section {
    width: vw(750);
    .centent {
        width: vw(665);
        margin: vw(38) auto 0;
        .top {
            width: vw(665);
            height: vw(68);
            line-height: vw(68);
            margin: 0 0 vw(10);
            padding: 0 vw(15);
            background: rgb(255, 147, 68);
            position: relative;
            &:hover {
                background-color: red;
            }
            &::after,
            &::before {
                content: "";
                border: vw(20) solid transparent;
                position: absolute;
                top: 20%;
                right: vw(10);
            }
            &::before {
                border-left-color: #fff;
            }
            &::after {
                border-left-color: rgb(255, 147, 68);
                right: vw(15);
            }
            &:hover::after {
                border-left-color: red;
            }
            span {
                font-size: vw(30);
                color: #fff;
            }
        }
        .list-1,
        .list-2,
        .list-3 {
            @include display-fx;
            position: relative;
            margin-bottom: vw(10);
            div {
                width: vw(178);
                height: vw(178);
                background: url(../image/detail/图层-21.png) no-repeat;
                background-size: cover;
                background-position: center;
                span {
                    font-size: vw(22);
                    text-align: center;
                    display: inline-block;
                    width: vw(178);
                    height: vw(40);
                    line-height: vw(40);
                    background: #fff;
                    opacity: 0.8;
                    margin-top: vw(98);
                }
            }
            ul {
                width: vw(466);
                height: vw(178);
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                font-size: vw(25);
                color: rgb(149, 149, 149);
                li:first-of-type {
                    font-size: vw(30);
                }
                li:nth-of-type(2) {
                    display: flex;
                    align-items: center;
                    img {
                        width: vw(35);
                        height: vw(35);
                        margin-right: vw(6);
                    }
                }
                li:nth-of-type(4) a {
                    color: rgb(255, 147, 68);
                    &:hover {
                        color: red;
                    }
                }
            }
            button {
                width: vw(112);
                height: vw(60);
                line-height: vw(60);
                background: rgb(255, 147, 68);
                border-radius: vw(20);
                color: #fff;
                font-size: vw(30);
                text-align: center;
                position: absolute;
                top: vw(59);
                right: 0;
                &:hover {
                    background-color: red;
                }
            }
        }
        .list-2 {
            div {
                background: url(../image/detail/图层-32.png) no-repeat;
                background-size: cover;
                background-position: center;
            }
        }
        .list-3 {
            div {
                background: url(../image/detail/图层-42.png) no-repeat;
                background-size: cover;
                background-position: center;
            }
        }
    }
}